<template>
  <div class="statistics">
    <h2 style="color: white;">商品总览与统计</h2>
    <div class="cards">
      <a-card class="statistic-card">
        <a-statistic title="所有商品数量" :value="totalProducts" />
      </a-card>
      <a-card class="statistic-card">
        <a-statistic title="价格区间 0-50" :value="priceRange[0]" />
      </a-card>
      <a-card class="statistic-card">
        <a-statistic title="价格区间 51-100" :value="priceRange[1]" />
      </a-card>
      <a-card class="statistic-card">
        <a-statistic title="价格区间 101-500" :value="priceRange[2]" />
      </a-card>
      <a-card class="statistic-card">
        <a-statistic title="价格区间 500+" :value="priceRange[3]" />
      </a-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import request from '../../../util/request';
import { message } from 'ant-design-vue';

export default {
  name: 'ProductStatistics',
  setup() {
    const totalProducts = ref(0);
    const priceRange = ref([0, 0, 0, 0]); // [0-50, 51-100, 101-500, 500+]

    const fetchStatistics = async () => {
      // 假设这里是获取统计数据的 API 调用
      request.get('product/getAll').then(res => {
        const data = res.data.pl;
        data.forEach(product => {
          const price = product.prodPrice;
          if (price <= 50) {
            priceRange.value[0]++;
          } else if (price <= 100) {
            priceRange.value[1]++;
          } else if (price <= 500) {
            priceRange.value[2]++;
          } else {
            priceRange.value[3]++;
          }
        });
        totalProducts.value = data.length;
      }).catch(err => {
        message.error('获取产品数据失败：', err);
      });
      // 模拟数据
      // totalProducts.value = 150; // 假设总商品数量
      // priceRange.value = [30, 50, 40, 30]; // 模拟价格区间统计
    };

    onMounted(fetchStatistics);

    return {
      totalProducts,
      priceRange,
    };
  },
};
</script>

<style scoped>
.statistics {
  padding: 24px;
  background: #1a1a1a;
  /* 暗色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  /* 字体颜色为白色 */
}

.cards {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.statistic-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.8);
  /* 微透明背景 */
}
</style>